<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./jquery-1.8.3.js"></script>

    <script>
        $(document).ready(function () {
            // CSS
            // 设置一个属性
            $('#btn_css_1').click(function () {
                $('#div_css_1').css('color', 'red');
            });
            // 设置多个属性
            $('#btn_css_n').click(function () {
                $('#div_css_n').css({
                    'color': 'red',
                    'background-color': 'orange',
                });
            });

            // html
            // 设置html内容
            $('#btn_html').click(function () {
                $('#div_html').html('<p>今天是个好日子</p>');
            });
            // 读取text内容
            $('#btn_text_get').click(function () {
                var text = $('#div_text').text();
                alert(text);
            });
            // 修改text内容
            $('#btn_text_set').click(function () {
                $('#div_text').text('<p>今天是个好日子</p>');
            });
            // 读取value内容
            $('#btn_val_get').click(function () {
                var value = $('#input_val').val();
                alert(value);
            });
            // 修改value内容
            $('#btn_val_set').click(function () {
                $('#input_val').val('今天是个好日子');
            });
            // 读取attr属性内容
            $('#btn_attr_get').click(function () {
                var value = $('#input_attr').attr('placeholder');
                alert(value);
            });
            // 修改attr属性内容
            $('#btn_attr_set').click(function () {
                $('#input_attr').attr('placeholder', '请输入您的联系方式');
            });


            // jQuery - 添加元素
            // 在被选元素的结尾插入内容
            $('#btn_append').click(function () {
                $('#div_append').append('<div>今天是个好日子</div>');
            });
            // 在被选元素的开头插入内容
            $('#btn_prepend').click(function () {
                $('#div_prepend').prepend('<div>今天是个好日子</div>');
            });
            // 在被选元素之后插入内容
            $('#btn_after').click(function () {
                $('#div_after').after('<div style="width: 60%; display: inline-block;">今天是个好日子</div>');
            });
            // 在被选元素之前插入内容
            $('#btn_before').click(function () {
                $('#div_before').before('<div style="width: 60%; display: inline-block;">今天是个好日子</div>');
            });

            // jQuery - 删除元素
            // 删除被选元素及其子元素
            $('#btn_remove').click(function () {
                $('#div_remove').remove();
            });
            // 删除被选元素的子元素
            $('#btn_empty').click(function () {
                $('#div_empty').empty();
            });

        });
    </script>
</head>

<body style="margin-bottom: 100px;">

    <h3>CSS</h3>

    <h4>css</h4>
    <h5>设置一个属性</h5>
    <div>
        <div id="div_css_1">hello, world.</div>
        <button id="btn_css_1">设置一个属性</button>
    </div>
    <h5>设置多个属性</h5>
    <div>
        <div id="div_css_n">hello, world.</div>
        <button id="btn_css_n">设置多个属性</button>
    </div>

    <hr style="border: blue 2px solid;">

    <h3>获取内容和属性 设置内容和属性</h3>

    <h4>html</h4>
    <div>
        <div id="div_html">div原始内容</div>
        <button id="btn_html">设置html内容。并通过右键“检查”验证。</button>
    </div>
    <hr>

    <h4>text</h4>
    <div>
        <div id="div_text">div原始内容</div>
        <button id="btn_text_get">读取text内容。</button>
        <button id="btn_text_set">设置text内容。并通过右键“检查”验证。</button>
        <div>本例，可以设计为从一个输入框读取值，往另一个输入框写入值。</div>
    </div>
    <hr>

    <h4>val</h4>
    <div>
        <input id="input_val" type="text" value="原始值">
        <button id="btn_val_get">读取value内容。</button>
        <button id="btn_val_set">设置value内容。并通过右键“检查”验证。</button>
        <div>本例，可以设计为从一个输入框读取值，往另一个输入框写入值。</div>
    </div>
    <hr>

    <h4>val</h4>
    <div>
        <input id="input_attr" type="text" placeholder="请输入您的用户名">
        <button id="btn_attr_get">读取placeholder属性内容。</button>
        <button id="btn_attr_set">设置placeholder属性内容。并通过右键“检查”验证。</button>
        <div>本例，可以设计为从一个输入框读取值，往另一个输入框写入值。</div>
    </div>


    <hr style="border: blue 2px solid;">

    <h3>jQuery - 添加元素</h3>

    <h4>append</h4>
    <div>
        <div id="div_append" style="width: 60%; display: inline-block;">
            <div style="background-color: gray;">原有内容</div>
        </div>
        <button id="btn_append">在被选元素的结尾插入内容</button>
    </div>
    <hr>

    <h4>prepend</h4>
    <div>
        <div id="div_prepend" style="width: 60%; display: inline-block;">
            <div style="background-color: gray;">原有内容</div>
        </div>
        <button id="btn_prepend">在被选元素的开头插入内容</button>
    </div>
    <hr>

    <h4>after</h4>
    <div>
        <div id="div_after" style="background-color: gray; width: 60%; display: inline-block;">原有内容</div>
        <button id="btn_after">在被选元素之后插入内容</button>
    </div>
    <hr>

    <h4>before</h4>
    <div>
        <div id="div_before" style="background-color: gray; width: 60%; display: inline-block;">原有内容</div>
        <button id="btn_before">在被选元素之前插入内容</button>
    </div>


    <hr style="border: blue 2px solid;">

    <h3>jQuery - 删除元素</h3>

    <h4>remove</h4>
    <div>
        <div id="div_remove" style="background-color: gray;display: inline-block;">原有内容</div>
        <button id="btn_remove">删除被选元素及其子元素</button>
    </div>
    <h4>remove</h4>
    <div>
        <div id="div_empty" style="background-color: gray;display: inline-block;">
            原有内容
            <div>今天是个好日子</div>
            <div>明天还是个好日子</div>
        </div>
        <button id="btn_empty">删除被选元素的子元素</button>
    </div>


</body>

</html>